<script setup>
import { reactive,ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useAddressData } from './hooks/useAddressData'
import { IS_DEFAULT_ADDRESS } from '@/global/const'
import UniRegionSheet from "@/components/zxp-uniRegionSheet/zxp-uniRegionSheet.vue";
const { submitAddress,addressFormData,getOneAddress } = useAddressData()

const showSheetView = ref(false)
onLoad((option) => {
  option.id && getOneAddress(option.id)
})
const handleSelectAddress = ({ data }) => {
  showSheetView.value = false
  if(data) {
    addressFormData.provinceName = data.text
  }
}
</script>

<template>
  <view class="create-order-container">
    <uni-section title="地址信息" type="line">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms label-position="top" label-width="120" ref="baseForm" :modelValue="addressFormData">
        <uni-forms-item label="收货人姓名" required>
          <uni-easyinput v-model="addressFormData.name" placeholder="收货人姓名" />
        </uni-forms-item>
        <uni-forms-item label="手机号" required>
          <uni-easyinput type="number" v-model="addressFormData.phone" placeholder="手机号" />
        </uni-forms-item>
        <uni-forms-item label="收货地址" required>
          <uni-easyinput @focus="() => showSheetView = true" v-model="addressFormData.provinceName" placeholder="选择" />
        </uni-forms-item>
        <uni-forms-item label="详细地址(小区、门牌号)" required>
          <uni-easyinput type="address" v-model="addressFormData.address" placeholder="详细地址" />
        </uni-forms-item>
        <uni-forms-item label="是否设置为默认收货地址">
          <uni-data-checkbox v-model="addressFormData.isDefault" :localdata="IS_DEFAULT_ADDRESS" />
        </uni-forms-item>
      </uni-forms>
    </uni-section>
  </view>
  <view class="addBtn">
    <up-button class="btn" @click="submitAddress"  type="primary">提交</up-button>
  </view>

    <uni-region-sheet
        :maskDismiss="false"
        :showSheetView="showSheetView"
        displayStyle="sheet or drawer"
        :defaultIndexs="[0,0,0]"
        @onSelected="handleSelectAddress" />
</template>

<style scoped lang="scss">
:deep(.uni-page-head-btn) {
  display: block !important;
}
uni-page-body {
  background-color: $u-primary-light;
  height: 100%;
}

:deep(.uni-section-content) {
  padding: 10px;
}
:deep(.uni-forms-item) {
  margin-bottom: 15rpx !important;
}
:deep(.uni-forms-item__label) {
  padding-bottom: unset !important;
}
:deep(.uni-section-header) {
  padding-bottom: unset !important;
}
.create-order-container {
  padding-bottom: 170rpx;
  .address-item {
    margin-bottom: 20rpx;
    .default_text {
      color: $uni-text-color-grey;
    }
    .address-detail {
      font-size: 35rpx;
    }
    .user-info {
      color: $uni-text-color-grey;
      margin-top: 15rpx;
      font-size: 28rpx;
      .user-phone {
        margin-left: 25rpx;
      }
    }
  }
}
.addBtn {
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  .btn {
    width: 100%;
    //background-color: #00aaff;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
